<template>
  <view class="basic tn-safe-area-inset-bottom">

    <view :style="{height: vuex_custom_bar_height+vuex_status_bar_height + 'px'}" class="top-backgroup"> </view>
	
	<view style="margin-top: 28rpx;">
		<tn-swiper @click="trunUrl" :height="swiperHeight" :list="list"  :radius="10" ></tn-swiper>
	</view>
	
	<view class="search-box tn-pl-sm tn-pr-lg bottom-search" @click="search()">
		<text class="tn-icon-search icon"></text>
		<text class="tn-pl-sm ">搜索</text>
	</view>
	
	<view class="main_title">
		<span>热门板块</span>
		<span class="tn-float-right">查看全部 >></span>
	</view>
	
  <view class="flex00 tn-margin-top-sm">
	<view @tap="trunUrlTwo(1)" class="flex-1 width-1 tn-radius10  heightBig index001"></view>
	<view class="flex-2 width-2">
	  <view @tap="trunUrlTwo(2)" class="tn-radius10 width-2  heightSmall  index002"></view>
	  <view @tap="trunUrlTwo(3)" class="ttn-radius10 width-2  heightSmall  index003"></view>
	</view>
  </view>

  <view class="flex00 tn-margin-top">
	<view class="flex-2 width-2">
	  <view class=" tn-radius10 width-2  heightSmall index004"></view>
	  <view class="  tn-radius10  width-2 heightSmall index005"></view>
	</view>
	 <view class="flex-1 width-1  tn-radius10  heightBig  index006"> </view>
  </view>
  
<!--  <view class="flex00 tn-margin-top">
  	<view class="flex-1 width-1 tn-radius10  heightBig index001"></view>
  	<view class="flex-2 width-2">
  	  <view class="tn-radius10 width-2  heightSmall  index002"></view>
  	  <view class="ttn-radius10 width-2  heightSmall  index003"></view>
  	</view>
  </view> -->
  
  <view class="bottom-tips tn-text-center">| 热门推荐 | </view>
  
  <view class="bottom-adv tn-radius10" :style="{ backgroundImage: 'url(' + adv.image + ');' }" > </view>
  
  <view class="submit-btn tn-text-center tn-radius10" >广告推荐 </view>
    
  <view class="tn-padding-bottom-xs"></view>

  </view>
</template>

<script>
  import {fetchList} from '@/api/index/index.js'
  
  export default {
    name: 'Basic',
    filters: {
      titleFilter(value) {
        if (value.length === 0) {
          return ''
        }
        let newString = ''
        for (let i = 0; i < value.length; i++) {
          if (i !== 0) {
            newString += ' / '
          }
          newString += value[i]
        }
        return newString
      }
    },
    data() {
      return {
		swiperHeight:146,
		list: [],
		adv:{}
      }
    },
	mounted() {
		this.initData()
	},
    methods: {
	  trunUrl(index){
		if(this.list[index]?.href){
			uni.navigateTo({
			  url: this.list[index].href
			}) 
		}
		 
	  },
      getRandomCoolBg() {
        return this.$tn.color.getRandomCoolBgClass()
      },
	  search(){
		  uni.navigateTo({
		    url: '/pages/search/search?type=1'
		  })
		  
	  },
	  trunUrlTwo(tap){
		uni.redirectTo({
		  url: '/pages/index/index?index=1'
		})  
	  },
	  initData(){
		  fetchList({page:1,size:10,position:"index_top"}).then(res=>{
			  this.list = res.data
		  })
		  
		  fetchList({page:1,size:10,position:"index_middle"}).then(res=>{
		  	 this.adv = res.data[0]
		  })
		  
	  }
    }
  }
</script>

<style lang="scss" scoped>
	.basic{
		font-family: "PingFangSCRegular";
		.submit-btn {
		  width: 100%;
		  background-color: $tn-main-orange;
		  color: #FFFFFF;
		  line-height: 105rpx;
		  font-size: 30rpx;
		  margin-top: 31rpx;
		}
	}
	.main_title{
		color: #FFFFFF;
		text-align: left;
		margin-top: 30rpx;
		font-size: 24rpx;
		font-weight: bold;
	}
	.tn-radius10{border-radius: 10rpx;}
	.heightBig{height: 382rpx;}
	.heightSmall{height: 175rpx;}
	.right0{margin-right: 0;}
	.left0{margin-left: 0;}
	.top-tips{color: $tn-main-orange;font-size: 18rpx;margin-top: 18rpx;margin-bottom: 30rpx;letter-spacing: 1px;font-weight: bold;}
	.flex00{
		color: #fa9254;
		height: 382rpx;
		display: flex;
		justify-content: space-between;
	}
	.width-1{width: 211rpx;}
	.width-2{width: 402rpx;}
	
	.flex-2{
		justify-content: space-between;
		display: flex;
		flex-direction: column;
	}
	
	.index001{
		background: url("https://www.zztengma.com/lihu/bumang/images/001.png") no-repeat  ;
		background-size: contain;
	}
	.index002{
		background: url("https://www.zztengma.com/lihu/bumang/images/002.png") no-repeat  ;
		background-size: contain;
	}
	.index003{
		background: url("https://www.zztengma.com/lihu/bumang/images/003.png") no-repeat  ;
		background-size: contain;
	}
	.index004{
		background: url("https://www.zztengma.com/lihu/bumang/images/004.png") no-repeat ;
		background-size: contain;
	}
	
	.index005{
		background: url("https://www.zztengma.com/lihu/bumang/images/005.png") no-repeat  ;
		background-size: contain;
	}
	
	.index006{
		background: url("https://www.zztengma.com/lihu/bumang/images/006.png") no-repeat  ;
		background-size: contain;
		margin-left: 10px;
	}
	.bottom-tips{line-height: 87rpx;font-size: 24rpx;}
	.bottom-adv{
		height: 202rpx;width: 100%;
		background-repeat:  no-repeat  ;
		background-size: contain;
	}
	
	.search-box{
		height: 54rpx;
		width:100%; 
		background-color: #e5f3f9;
		//border:1px solid #FFF;
		border-radius: 27rpx;
		line-height: 54rpx;
		color: $tn-main-orange;
		font-size: 24rpx;
		padding: 0 10px;
		margin-top: 31rpx;
		.icon{
			font-size: 16px;
			margin-right: 5px;
			font-weight: bold;
		}
	}

  /* 顶部背景图 start */
  .top-backgroup {
    //height: 263rpx;
    background: url("https://www.zztengma.com/lihu/bumang/images/logoIndex.png") center bottom no-repeat;
	background-size: 30%;
  }
  /* 顶部背景图 end */
  
  /* 内容容器 start */
  .bg-flex-shadow{
    background-color: #e2f1f9;
    z-index: 9999;
  }
  /* 内容容器 end */
  

</style>
